23. What is Hoisting?

What is Hoisting in JavaScript?

Hoisting is a JavaScript mechanism where variables and function declarations are moved (hoisted) to the top of their scope before the code execution. This means that you can use variables and functions before declaring them in your code.

However, only declarations are hoisted, not initializations.

Hoisting with var

js
CopyEdit
console.log(x); // Output: undefined
var x = 5;
console.log(x); // Output: 5

Explanation:

• The declaration var x; is hoisted to the top, but the assignment x = 5; is not.
• So, console.log(x); before initialization prints undefined.

Hoisting with let and const

js
CopyEdit
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

Explanation:

• Unlike var, let and const are hoisted but remain in a "temporal dead zone" (TDZ) until their declaration is encountered.
• This means you cannot access y before it's declared.

Hoisting with Functions

Function Declarations

js
CopyEdit
greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

Explanation:

• Function declarations are fully hoisted, meaning you can call them before they are defined.

Function Expressions (Not Hoisted)

js
CopyEdit
greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

Explanation:

• Here, greet is hoisted as undefined, so calling it before initialization causes an error.

Summary

Would you like more examples or a deep dive into TDZ? 🚀